<template>
    <view class="content">
        <image src="../../static/image/us_bg.png" class="us-bg"></image>
        <view class="wrapper">
            <view class="u-flex u-row-between">
                <view class="balance">
                    <view>当前余额</view>
                    <view class="u-font-34">
                        ￥<text class="balance-num">{{data.balance}}</text>
                    </view>
                </view>
                <view class="tip" @click="show = true">充值说明</view>
            </view>
            
            <view class="see">
                <image src="../../static/image/us_img_01.png" class="us-img-01"></image>
                <view class="u-flex u-flex-1">
                    <image src="../../static/icon/us_icon.png" class="us-icon"></image>
                    <view>点击查询余额变动明细</view>
                </view>
                <view class="see-btn" @click="$gTo(`/mine/pages/recharge/recharge-list`)">去查看</view>
            </view>
            
            <view class="box">
                <image src="../../static/image/us_img_03.png" class="us-img-03"></image>
                <view class="box-cen">
                    <view class="item" :class="{active : rId == item.id}" 
                        v-for="(item, index) in data.recharge" :key="index" @click="choose(item)">
                        <image src="../../static/image/us_img_02.png" class="us-img-02" v-if="rId == item.id"></image>
                        <view class="money" :class="{activeM : rId == item.id}" >
                            <text class="money-num">{{item.money}}</text>元
                        </view>
                        <view :class="{activeMM : rId == item.id}">送{{item.give_money}}元</view>
                    </view>
                </view>
            </view>
            
            <view class="btn" @click="toPay">确认充值</view>
        </view>
        
        <u-popup v-model="show" mode="center" border-radius="15">
        	<view class="rule-frame">
        		<view class="rule-frame-tit">充值说明</view>
        		<view>
                    <scroll-view scroll-y="true" style="height: 40vh;">
                        <view class="privacy-txt">
                            <rich-text :nodes="clause"></rich-text>
                        </view>
                    </scroll-view>
        		</view>
        		<view class="rule-btn" @click="show = false">我知道了</view>
        	</view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                clause: '',
                data: {},
                rId: '',
                money: 0,
            };
        },
        onLoad() {
            this.getRule()
        },
        onShow() {
            this.getRecharge()
        },
        methods: {
            toPay() {
                this.$ajax('recharge_order', {
                	user_token: this.$getSync('userToken'),
                    id: this.rId,//充值金额id
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$gTo(`/mine/pages/pay/pay?id=${ret.detail.id}&money=${ret.detail.order_amount}`)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 选择充值金额
            choose(item) {
                const nowStatu = item.isSelect
                this.data.recharge.forEach(cur => {
                    cur.isSelect = false
                })
                item.isSelect = nowStatu
                this.rId = item.id
                this.money = item.money
            },
            
            getRecharge() {
            	this.$ajax('user_recharge', {
            		user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.data = ret.detail
                        if (this.data.recharge && this.data.recharge.length > 0) {
                            this.data.recharge.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                            this.rId = this.data.recharge[0].id
                            this.money = this.data.recharge[0].money
                        }
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            getRule() {
            	this.$ajax('select_rules', {
                    type: 5,//1平台介绍 2隐私政策 3服务协议 4用户协议 5充值说明 6保险授权委托书 7伙伴授权委托书 8伙伴通讯委托书 9电子合同授权书 10背调授权书
            	}).then(ret => {
            		this.clause = ret.detail.rules
            	});
            },
        }
    };
</script>

<style lang="scss">
    .rule-frame {
    	width: 626rpx;
    	border-radius: 10rpx;
    	background-color: #fff;
    	padding: 40rpx 30rpx 64rpx;
    }
    .rule-frame-tit {
    	font-size: 32rpx;
        font-weight: bold;
    	line-height: 34rpx;
    	color: #000000;
    	text-align: center;
    	margin-bottom: 40rpx;
    }
    .rule-btn {
    	width: 372rpx;
    	height: 80rpx;
    	font-size: 30rpx;
    	line-height: 80rpx;
    	color: #fff;
    	text-align: center;
    	background-color: #f29700;
        border-radius: 15rpx;
    	margin: 80rpx auto 0;
    }
    .privacy-txt {
        font-size: 26rpx;
        color: #949494;
    }
    
    
    page{
        background-color: #f5f5f5;
    }
    .us-bg{
        width: 750rpx;
        height: 380rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .wrapper{
        padding: 30rpx 25rpx;
    }
    .balance{
        font-size: 26rpx;
        color: #fff;
        padding-left: 15rpx;
    }
    .balance-num{
        font-size: 64rpx;
    }
    .tip{
        font-size: 24rpx;
        color: #fec427;
        padding: 15rpx 25rpx;
        background-color: #000;
        border-radius: 50rpx;
    }
    
    .see{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 40rpx 0 30rpx;
        font-size: 24rpx;
        color: #fff;
        padding: 20rpx 30rpx;
        background: rgba(255, 255, 255, .3);
        border-radius: 15rpx;
    }
    .us-img-01{
        width: 102rpx;
        height: 33rpx;
        margin-right: 23rpx;
    }
    .us-icon{
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
    }
    .see-btn{
        font-size: 24rpx;
        color: #e6a800;
        padding: 12rpx 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .box{
        padding: 0 20rpx 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .us-img-03{
        width: 265rpx;
        height: 59rpx;
        margin: 0 auto 30rpx;
    }
    .box-cen{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .item{
        width: 215rpx;
        height: 143rpx;
        background-color: #fffaeb;
        border-radius: 15rpx;
        margin-right: 8rpx;
        margin-bottom: 8rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        position: relative;
    }
    .item:nth-child(3n) {
        margin-right: 0;
    }
    .money{
        color: #fec427;
    }
    .money-num{
        font-size: 44rpx;
    }
    .us-img-02{
        width: 56rpx;
        height: 36rpx;
        position: absolute;
        top: 0;
        right: 0;
    }
    .active{
        background-color: #f29700;
    }
    .activeM{
        color: #fff;
    }
    .activeMM{
        color: rgba(255, 255, 255, .5);
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #f29700;
        border-radius: 15rpx;
        margin-top: 55rpx;
    }
    

</style>
